<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../../resources/styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="icon" type="image/x-icon" href="../../../resources/favicon.ico">
    <title>Tools Component</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      .full-screen {
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
      }
    </style>
</head>
<body>
<div class="full-screen" id="container"></div>
<script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.160.1/build/three.module.js",
        "web-ifc": "https://unpkg.com/web-ifc@0.0.50/web-ifc-api.js",
        "stats.js/src/Stats.js": "https://unpkg.com/stats-js@1.0.1/src/Stats.js",
        "three/examples/jsm/libs/lil-gui.module.min": "https://unpkg.com/three@0.160.1/examples/jsm/libs/lil-gui.module.min.js",
        "openbim-components": "../../../resources/openbim-components.js",
         "client-zip": "https://unpkg.com/client-zip@2.3.0/index.js"
      }
    }

</script>
<script type="module">

    // Set up scene (see SimpleScene tutorial)

    import * as THREE from 'three';
    import * as OBC from 'openbim-components';
    import Stats from 'stats.js/src/Stats.js';

    const container = document.getElementById('container');

    const components = new OBC.Components();

    components.scene = new OBC.SimpleScene(components);
    components.renderer = new OBC.PostproductionRenderer(components, container);
    components.camera = new OBC.SimpleCamera(components);
    components.raycaster = new OBC.SimpleRaycaster(components);

    components.init();

    components.renderer.postproduction.enabled = true;
    components.renderer.postproduction.customEffects.outlineEnabled = true;

    const scene = components.scene.get();

    components.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);

    components.scene.setup();

    const grid = new OBC.SimpleGrid(components, new THREE.Color(0x666666));
    const customEffects = components.renderer.postproduction.customEffects;
    customEffects.excludedMeshes.push(grid.get());

    let fragments = new OBC.FragmentManager(components);
    let fragmentIfcLoader = new OBC.FragmentIfcLoader(components);

    fragmentIfcLoader.settings.wasm = {
        path: "https://unpkg.com/web-ifc@0.0.50/",
        absolute: true
    }

    fragmentIfcLoader.settings.webIfc.COORDINATE_TO_ORIGIN = true;
    fragmentIfcLoader.settings.webIfc.OPTIMIZE_PROFILES = true;

    const file = await fetch("../../../resources/asdf.frag");
    const data = await file.arrayBuffer();
    const buffer = new Uint8Array(data);
    const model = await fragments.load(buffer);
    const properties = await fetch("../../../resources/asdf.json");
    model.setLocalProperties(await properties.json());
    console.log(model);

    const mainToolbar = new OBC.Toolbar(components, {name: 'Main Toolbar', position: 'bottom'});
    components.ui.addToolbar(mainToolbar);
    mainToolbar.addChild(fragmentIfcLoader.uiElement.get("main"));

    // Set up road navigator

    const navigator = new OBC.RoadNavigator(components);

    const horizontalWindow = navigator.uiElement.get("horizontalAlignment");
    horizontalWindow.visible = true;

    const verticalWindow = navigator.uiElement.get("verticalAlignment");
    verticalWindow.visible = true;

    navigator.select(model);

    window.addEventListener("keydown", (event) => {
        if(event.code === "KeyS") {
            navigator.saveAnchor();
        }
        if(event.code === "KeyP") {
            navigator.setAnchor();
        }
    })

    window.ondblclick = () => {
        const result = components.raycaster.castRay();
        console.log(result);
    }

    navigator.loadAnchor();


    // Set up stats

    const stats = new Stats();
    stats.showPanel(2);
    document.body.append(stats.dom);
    stats.dom.style.left = '0px';
    const renderer = components.renderer;
    renderer.onBeforeUpdate.add(() => stats.begin());
    renderer.onAfterUpdate.add(() => stats.end());


</script>
</body>
</html>